<template>
  <div class="page">
    <LoginView
      :password="password"
      :userName="userName"
      @handleLogin="handleLogin"
      @handleRegister="handleRegister"
      @handleRetrieve="handleRetrieve"
    />
  </div>
</template>
<script lang="ts">
import { defaultInputHandler } from '@/library/util/input-event-handler';
import { useLoginBasicStore, useLoginInforStore } from '@/store/login';
import { defineComponent, ref } from 'vue';
import LoginView from './LoginView.vue';

export default defineComponent({
  components: { LoginView },
  setup() {
    // 用户名
    const userName = ref<string>('');
    // 密码
    const password = ref<string>('');

    // Store
    const loginStore = useLoginInforStore();
    const loginBasicStore = useLoginBasicStore();

    // 事件
    // 点击登录
    const handleLogin = (userName: string, password: string) => {
      // loginStore.fakeLogin();
      console.log(userName, password);
      loginStore.LoginByPassword(userName, password);
    };

    // 密码输入值改变
    const passwordChange = (e: InputEvent) => {
      password.value = defaultInputHandler(e, password.value);
    };

    // 用户名改变
    const userNameChange = (e: InputEvent) => {
      console.log(e);
      userName.value = defaultInputHandler(e, userName.value);
    };

    // 注册
    const handleRegister = () => {
      loginBasicStore.changeShowLogin(false);
    };

    // 找回密码
    const handleRetrieve = () => {
      console.log('handleRetrieve');
    };

    return {
      userName,
      password,
      handleLogin,
      passwordChange,
      userNameChange,
      handleRegister,
      handleRetrieve,
    };
  },
});
</script>
<style lang="less" scoped></style>
